﻿<template>
	<div>
		<el-row :gutter="20">
			<el-col :span="12">
				<el-card shadow="hover">
					<simple-chart class="schart"
							   :canvasid="'c1'"
							   :options="options"></simple-chart>
				</el-card>
			</el-col>
			<el-col :span="12">
				<el-card shadow="hover">
					<simple-chart class="schart"
							   :canvasid="'c2'"
							   :options="options2"></simple-chart>
				</el-card>
			</el-col>
		</el-row>
		<el-row :gutter="20">
			<el-col :span="12">
				<el-card shadow="hover">
					<simple-chart class="schart"
							   :canvasid="'c3'"
							   :options="options3"></simple-chart>
				</el-card>
			</el-col>
			<el-col :span="12">
				<el-card shadow="hover">
					<simple-chart class="schart"
							   :canvasid="'c4'"
							   :options="options4"></simple-chart>
				</el-card>
			</el-col>
		</el-row>
		<el-row :gutter="20">
			<el-col :span="12">
				<el-card shadow="hover">
					<div id='dy1'></div>
					<button @@click='dyaddchart1'>动态添加chart1</button>
				</el-card>
			</el-col>
			<el-col :span="12">
				<el-card shadow="hover">
					<div id='dy2'></div>
					<button @@click='dyaddchart2'>动态添加chart1</button>
				</el-card>
			</el-col>
		</el-row>
	</div>
</template>
<script>
module.exports = {
  methods: {
    dyaddchart1() {
      var ops = {
        type: "bar",
        title: {
          text: "最近一周各品类销售图",
        },
        bgColor: "#fbfbfb",
        labels: ["周一", "周二", "周三", "周四", "周五"],
        datasets: [
          {
            label: "家电",
            fillColor: "rgba(241, 49, 74, 0.5)",
            data: [234, 278, 270, 190, 230],
          },
          {
            label: "百货",
            data: [164, 178, 190, 135, 160],
          },
          {
            label: "食品",
            data: [144, 198, 150, 235, 120],
          },
        ],
      };
      this.$set(this.dycharts, 0, ops);

      // 先生成再调整大小
      SimpleChart.show("#dy1", "canv1", ops);
      var canvas = document.getElementById("canv1");
      $(canvas.parentNode).addClass("schart");
      SimpleChart.refresh("canv1");
      //ops.type = 'line'; //修改数据也可以刷新

      this.options.type = "line";
      alert(123);
      console.info(this.options);
    },
    dyaddchart2() {
      var ops = {
        type: "bar",
        title: {
          text: "最近一周各品类销售图",
        },
        bgColor: "#fbfbfb",
        labels: ["周一", "周二", "周三", "周四", "周五"],
        datasets: [
          {
            label: "家电",
            fillColor: "rgba(241, 49, 74, 0.5)",
            data: [234, 278, 270, 190, 230],
          },
          {
            label: "百货",
            data: [164, 178, 190, 135, 160],
          },
          {
            label: "食品",
            data: [144, 198, 150, 235, 120],
          },
        ],
      };
      this.$set(this.dycharts, 0, ops);

      SimpleChart.show("#dy2", "canv2", ops, "schart");
    },
  },
  data() {
    return {
      dycharts: [],
      options: {
        type: "bar",
        title: {
          text: "最近一周各品类销售图",
        },
        bgColor: "#fbfbfb",
        labels: ["周一", "周二", "周三", "周四", "周五"],
        datasets: [
          {
            label: "家电",
            fillColor: "rgba(241, 49, 74, 0.5)",
            data: [234, 278, 270, 190, 230],
          },
          {
            label: "百货",
            data: [164, 178, 190, 135, 160],
          },
          {
            label: "食品",
            data: [144, 198, 150, 235, 120],
          },
        ],
      },
      options2: {
        type: "line",
        title: {
          text: "最近一周各品类销售图",
        },
        bgColor: "#fbfbfb",
        labels: ["周一", "周二", "周三", "周四", "周五"],
        datasets: [
          {
            label: "家电",
            fillColor: "rgba(241, 49, 74, 0.5)",
            data: [234, 278, 270, 190, 230],
          },
          {
            label: "百货",
            data: [164, 178, 190, 135, 160],
          },
          {
            label: "食品",
            data: [144, 198, 150, 235, 120],
          },
        ],
      },
      options3: {
        type: "pie",
        title: {
          text: "最近一周各品类销售图",
        },
        bgColor: "#fbfbfb",
        labels: ["周一", "周二", "周三", "周四", "周五"],
        datasets: [
          {
            label: "家电",
            fillColor: "rgba(241, 49, 74, 0.5)",
            data: [234, 278, 270, 190, 230],
          },
          {
            label: "百货",
            data: [164, 178, 190, 135, 160],
          },
          {
            label: "食品",
            data: [144, 198, 150, 235, 120],
          },
        ],
      },
      options4: {
        type: "ring",
        title: {
          text: "最近一周各品类销售图",
        },
        bgColor: "#fbfbfb",
        labels: ["周一", "周二", "周三", "周四", "周五"],
        datasets: [
          {
            label: "家电",
            fillColor: "rgba(241, 49, 74, 0.5)",
            data: [234, 278, 270, 190, 230],
          },
          {
            label: "百货",
            data: [164, 178, 190, 135, 160],
          },
          {
            label: "食品",
            data: [144, 198, 150, 235, 120],
          },
        ],
      },
    };
  },
}
</script>